<template>
    <div class="example">
        <div v-for="item in roomDictOptions" :key="item.value" :style="getRoomStyle(item.value)">
            {{ item.title }}
        </div>
    </div>
</template>

<script>
import { initDictOptions } from '@/components/dict/JDictSelectUtil'
import { KfStyleSettingMixin } from '@/views/PmsKF/KfStyleSetting/KfStyleSetting'
// import { KfStyleSettingMixin } from '../../KfStyleSetting/KfStyleSetting'

export default {
    name: "example",
    mixins: [KfStyleSettingMixin],
    data() {
        return {
            roomDictOptions: [],
        }
    },
    created() {
        this.initDictConfig()
    },
    computed: {
        getRoomStyle() {
            return (value) => {
                return { ...this.getCssExample, ...this.getBackgroundColor(value) }
            }
        }
    },
    methods: {
        async initDictConfig() {
            //初始化字典 - room_state
            let roomStateDictOptions = []
            await initDictOptions('room_state').then((res) => {
                if (res.success) {
                    roomStateDictOptions = res.result;
                }
            });

            //初始化字典 - room_mg
            let roomMgDictOptions = [];
            await initDictOptions('room_mg').then((res) => {
                if (res.success) {
                    roomMgDictOptions = res.result
                }
            })
            this.roomDictOptions = [...roomStateDictOptions, ...roomMgDictOptions]
        },
    }
}
</script>

<style lang="less" scoped>
.example {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
</style>